<template>
  <div>
    <van-row type="flex" class="row_title">
      <van-col class="col_title" span="3">
        <div class="title">
          <span>动态</span>
        </div>
      </van-col>
      <van-col class="col_search" span="21">
        <van-search class="search" shape="round" v-model="value" placeholder="请输入搜索关键词" />
      </van-col>
      <van-col class="col_function" span="24">
        <div class="col_dynamic">发布动态</div>
        <div class="col_video">发布视频</div>
      </van-col>
      <van-col class="col_show_head" span="24">
        <div class="col_head"></div>
        <div class="col_headname">音乐诊疗室</div>
        <div class="col_time">2020/9/1 11:28:23发布</div>
      </van-col>
      <van-col class="col_show_container" span="24">
        <div class="col_img"></div>
        <div class="col_ms">传唱了25年的老歌，原唱的嗓音太甜美，耳朵福利！</div>
        <div class="col_show_function">
          <div class="box_tu">
            <div class="dian"><img src="https://img.imgdb.cn/item/6067e9818322e6675cc81cba.png" alt=""></div>
            <div class="zan">95</div>
          </div>
          <div class="liuyan">
            <img src="https://img.imgdb.cn/item/60680d7b8322e6675ceaf3ea.png" alt="">
          </div>
          <div class="gengduo">
            <img src="https://img.imgdb.cn/item/60680db68322e6675ceb2930.png" alt="">
          </div>
        </div>
      </van-col>
      <van-col class="col_show_head" span="24">
        <div class="col_head"></div>
        <div class="col_headname">apple</div>
        <div class="col_time">2020/9/1 11:27:23发布</div>
      </van-col>
      <van-col class="col_show_container" span="24">
        <div class="col_img"></div>
        <div class="col_ms">传唱了25年的老歌，原唱的嗓音太甜美，耳朵福利！</div>
        <div class="col_show_function">
          <div class="box_tu">
            <div class="dian"><img src="https://img.imgdb.cn/item/6067e9818322e6675cc81cba.png" alt=""></div>
            <div class="zan">95</div>
          </div>
          <div class="liuyan">
            <img src="https://img.imgdb.cn/item/60680d7b8322e6675ceaf3ea.png" alt="">
          </div>
          <div class="gengduo">
            <img src="https://img.imgdb.cn/item/60680db68322e6675ceb2930.png" alt="">
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
5
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.row_title{
  width: 323px;
  height: 49px;
  /* background-color: rgb(0, 136, 255); */
}
.title{
  width: 28px;
  height: 16px;
  margin: 18px 0px 0px 13px;
}
.col_title span{
  width: 28px;
  height: 16px;
  font-size: 14px;
  color: #333333;
  font-weight: 700;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.search{
  width: 260px;
  height: 34px;
  margin: 10px 0px 0px 9.63px;
  padding: 2px;
}
/*  */
.col_function{
  height: 48px;
  margin-top: 5px;
  /* background-color: rgba(137, 43, 226, 0.527); */
  border-bottom:1px solid #5F4AC1 ;
}
.col_dynamic,.col_video{
  width: 161.5px;
  height: 49px;
  float: left;
  /* background-color: yellowgreen; */
  font-size: 14px;
  color: #333333;
  text-align: center;
  line-height: 49px;
  /* font-weight: 700; */
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
/*  */
.col_show_head{
  height: 44px;
  /* background-color: aqua; */
}
.col_head{
  width: 30px;
  height: 30px;
  background-color: #5F4AC1;
  /* background-image: url('../assets/img/dynamic_01.png'); */
  margin: 14px 0px 0px 13px;
  border-radius: 40px;
  float: left;
}
.col_headname{
  width: 70px;
  height: 16px;
  float: left;
  font-size: 14px;
  color: #333333;
  font-weight: 700;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  margin: 20px 0px 0px 10px;
}
.col_time{
  width: 120px;
  height: 14px;
  float: left;
  color: #C9C9C9;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-size: 12px;
  margin: 22px 0px 0px 65px;
}
.col_show_container{
  height: 256px;
  /* background-color: blue; */
}
.col_img{
  width: 300px;
  height: 175px;
  border-radius: 8px;
  margin: 12px 0px 7px 10px;
  background-image: url('https://img.imgdb.cn/item/606569ad8322e6675c92215b.png');
  background-size: 100%;
}
.col_ms{
  width: 300px;
  height: 32px;
  font-size: 14px;
  font-family: 楷体;
  color: #333333;
  margin-left: 10px;
}
.col_show_function{
  width: 300px;
  height: 30px;
  /* background-color: #C9C9C9; */
  margin-left: 10px;
}
.col_show_function div:nth-child(1){
  width: 49px;
  height: 20px;
  float: left;
  /* background-color: aqua; */
}
.col_show_function div:nth-child(1) img{
  width: 20px;
  height: 20px;
}
.box_tu{
  margin-left: 156px;
  margin-top: 7px;
}
.dian{
  float: left;
}
.zan{
  width: 19px;
  height: 16px;
  float: left;
  font-size: 14px;
  color: #333333;
  font-family: 楷体;
  /* line-height: 30px; */
  /* background-color: #ff0000; */
  margin-left: 30px;
  margin-top: -17px;
}
.liuyan{
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 22px;
  margin-top: 10px;
  /* background-color: yellowgreen; */
}
.liuyan img{
  width: 20px;
  height: 20px;
}
.gengduo{
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 30px;
  margin-top: 8px;
  /* background-color: #ff000069; */
}
.gengduo img{
  width: 20px;
  height: 20px;
}
</style>
